$(function () {
  // 1. 页面一加载，ajax请求个人详细信息，渲染页面
  $.ajax({
    method: 'GET',
    url: BigNew.user_detail,
    success: (res) => {
      // 打印后端返回的数据对象
      // console.log(res)
      // 解构出个人中心页所需的数据
      // 方案1：
      // const { email, nickname, password, userPic, username } = res.data
      // // 🧨记得验证数据的正确性
      // console.log('验证数据正确性', { email, nickname, password, userPic, username })
      // // 把数据渲染到页面
      // $('[name="username"]').val(username)
      // $('[name="nickname"]').val(nickname)
      // $('[name="email"]').val(email)
      // $('[name="password"]').val(password)
      // $('.user_pic').prop('src', res.data.userPic)
      // 方案2：
      for (let key in res.data) {
        // 🧨 注意 key 的数据类型是字符串
        if (key !== 'userPic') {
          $(`[name="${key}"]`).val(res.data[key])
        }
      }
      // 图片比较特别是 img 标签
      $('.user_pic').prop('src', res.data.userPic)
    },
  })

  // 2. 图片预览功能
  // 2.0 点击图片的时候触发一下文件上传按钮
  $('.user_pic').click(() => {
    $('[name="userPic"]').click()
  })
  // 2.1  给上传按钮绑定 change 事件，监听值的变化
  $('[name="userPic"]').change(() => {
    // 2.2 获取文件对象
    const fileObj = $('[name="userPic"]').get(0).files[0]
    // 2.3 获取文件对象的 url (调用浏览器提供的API，把文件对象转换成浏览器能识别的 url)
    const url = URL.createObjectURL(fileObj)
    console.log(url) // 🧨 路径比较特别：是以 blob:http:// 开头的路径，浏览器能识别，可用于图片预览
    // 2.4 把 url 写入到图片的 src 属性上，实现图片预览
    $('.user_pic').prop('src', url)
  })
  // 3. 编辑个人信息
  $('[type="submit"]').click((e) => {
    // 3.1. 绑定事件并阻止默认提交行为
    e.preventDefault()
    // 3.2. 通过 FormData 获取 form 表单内的值
    // new FormData(form对象)  传入一个原生的 form 表单对象可以快速获取表单所有值
    const form = document.getElementById('form')
    const fd = new FormData(form)
    // 遍历 fd 数据
    fd.forEach((value, key) => {
      console.log(key, value)
    })
    // 3.3. 发送 ajax 请求更新用户信息
    $.ajax({
      method: 'POST',
      url: BigNew.user_edit,
      // FormData 直接作为参数
      data: fd,
      // FormData 作为参数参数，记得添加这对 cp 组合
      contentType: false,
      processData: false,
      success: (res) => {
        // console.log(res)
        if (res.code === 200) {
          alert('✅更新用户信息成功')
          // window           当前窗口
          // window.parent    父窗口
          // 让父窗口的地址栏刷新
          // 🧨 注意：需要通过 VsCode 的 LiveServer 方式打开首页后操作
          window.parent.location.reload()
        }
      },
    })
  })
})
